<template>
  <div class="condition-content" ref=“myElement>
    <div style v-for="(el,idx) in conditionObj" :key="idx">
      <div
        class="title"
      >{{idx=='provinceConditionList'?'省级类别':idx=='cityConditionList'?'市级类别':idx=='propertyList'?'项目性质':''}}</div>
      <div class="tags-content">
        <div v-for="(item,index) in el" :key="index" class="tags">
          <span
            :class="{'active':sumConditionList.indexOf(item)>=0}"
            @click="labelCheck(idx,item)"
          >{{item}}</span>
        </div>
      </div>
    </div>
    <div style="width:100%;display:flex;">
      <div class="reset-btn" @click="reset()">
        <div class="btn-name">重置</div>
      </div>
      <div class="confirm-btn" @click="confirm()">
        <div class="btn-name">确定({{len}}个项目)</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, toRefs, watch, onActivated, onMounted } from 'vue'
import { showImagePreview } from 'vant'
import { useRouter } from 'vue-router'
import ProjectServe from '@/api/keyProject'

const emit = defineEmits(['close-pop', 'search-data'])

defineOptions({
  name: 'keyProjectDetail'
})

const props = defineProps({
  activeTab: {
    type: Number,
    default: 0
  },
  len: {
    type: Number,
    default: 0
  },
  searchText:{
    type:String,
    default:''
  }
})
const isFocus = ref()
const router = useRouter()
const projectDetail = ref({})
const conditionObj = ref({})
const isChecked = ref(false)
// const currentTab = ref<number>(0)
const currentTab = ref('')
const conditionParam = ref({})
const provinceCondition = ref([]),
  cityCondition = ref([]),
  propertyCondition = ref([])
const sumConditionList = ref([]) //选中的所有条件集合
const myElement = ref<NullAble<HTMLElement>>(null)

const length = computed(() => {
  return props.len
})
const text = computed(() => {

  return props.searchText
})
watch(
  () => props.activeTab,
  val => {
    if (!(typeof val !== 'number' && val)) {
      currentTab.value = val
      //tab切换清空选中的条件
      // clearData();
      getDataByCondition()
    }
  }
)

onMounted(() => {  
  getSelectConditionList();
  document.addEventListener('click', handleClickOutside);
})

const handleClickOutside = (event) => {
  emit('close-pop')
}
const getSelectConditionList = () => {
  ProjectServe.getSelectConditionList({}).then(res => {
    if (res.status == '1') {
      //点击获取所有筛选条件
      conditionObj.value = res.data
    }
  })
}

// 选中筛选条件
const labelCheck = (type, el) => {
  // 将选中的不同条件放到不同的参数中
  switch (type) {
    case 'provinceConditionList':
      // 省级类别:如果已经选中，再次点击移除数据
      if (provinceCondition.value.indexOf(el) >= 0) {
        provinceCondition.value = provinceCondition.value.filter(item => {
          return item !== el
        })
        // 再次点击移除数据
        sumConditionList.value = sumConditionList.value.filter(item => {
          return item !== el
        })
      } else {
        provinceCondition.value.push(el)
        sumConditionList.value.push(el)
      }
      break
    case 'cityConditionList':
      // 市级类别:如果已经选中，再次点击移除数据
      if (cityCondition.value.indexOf(el) >= 0) {
        cityCondition.value = cityCondition.value.filter(item => {
          return item !== el
        })
        sumConditionList.value = sumConditionList.value.filter(item => {
          return item !== el
        })
      } else {
        cityCondition.value.push(el)
        sumConditionList.value.push(el)
      }
      break
    case 'propertyList':
      // 项目性质:如果已经选中，再次点击移除数据
      if (propertyCondition.value.indexOf(el) >= 0) {
        propertyCondition.value = propertyCondition.value.filter(item => {
          return item !== el
        })
        sumConditionList.value = sumConditionList.value.filter(item => {
          return item !== el
        })
      } else {
        propertyCondition.value.push(el)
        sumConditionList.value.push(el)
      }
      break
    default:
      break
  }
  //筛选数据
  getDataByCondition()
}
const confirm = () => {
  getDataByCondition()
  emit('close-pop')
}
const getDataByCondition = () => {
  //根据筛选条件检索
  let param = {
    cityCondition: cityCondition.value.toString(),
    projectName:'',
    productId: '',
    projectCondition: currentTab.value ? currentTab.value : '',
    propertyCondition: propertyCondition.value.toString(),
    provinceCondition: provinceCondition.value.toString(),
    userId: ''
  }
  emit('search-data', param)
}
// 重置操作
const reset = () => {
  //根据筛选条件检索
  clearData()
  getDataByCondition()
  // emit('search-data', {})
  // emit('close-pop')
}
const clearData = () => {
  provinceCondition.value = []
  propertyCondition.value = []
  cityCondition.value = []
  sumConditionList.value = []
}
//暴露属性和方法
defineExpose({
  clearData,
  reset
})
</script>

<script lang="ts">
</script>

<style lang="less" scoped>
.condition-content {
  // border-radius: 10px;
  background: #ffffff;
  color: #212121;
  box-shadow: 0px 3px 5px 0px #00000014;
  position: fixed;
  width: 100%;
  top: 92px;
  padding: 15px 15px;
  // height: 169px;
  // height: 22vh;
  z-index: 2;
  .title {
    font-size: 14px;
    color: #000100;
    font-weight: bold;
  }
  .tags-content {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    .tags {
      > span {
        display: inline-block;
        background: #f4f4f4;
        border-radius: 5px;
        color: #000000;
        font-size: 12px;
        height: 28px;
        line-height: 28px;
        padding: 0 10px;
        // border-radius: 14px;
        // box-shadow: 0px 4px 10px 0px #3a75c519;
        margin: 0 9px 8px 0;
        &.active {
          background: rgba(255, 131, 38, 0.1);
          color: #ff8326;
        }
      }
    }
  }
  .reset-btn {
    width: 101px;
    height: 36px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 36px;
    border: 1px solid #f4f4f4;
    text-align: center;
    font-family: 'PingFang SC';
  }
  .confirm-btn {
    width: 237px;
    margin: 0 0 0 6px;
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
    color: #ffffff;
    font-size: 14px;
    font-family: 'PingFang SC';
    border: 0.5px solid #ff8326;
    text-align: center;
    box-shadow: 0px 2px 5px 0px #ff8b36;
    background-image: linear-gradient(to right, #ff9e36, #ff8326);
    // opacity: 0.5;
  }
}
</style>

